<template>
  <div class="content">
    <div class="user-content">
    <!-- 个人中心中心部分 -->
      <div class="user-info-center">
        <div class="icon-wrap">
          <router-link to='/order_list'><img src="~assets/img/icon-zd@2x.png" alt="收入明细" class="icon-income"></router-link>
          <router-link to='/user_info'><img src="~assets/img/icon-sz@2x.png" alt="设置" class="icon-setting"></router-link>
        </div>
        <div class="user-money tc">
          <p class="money-title">可提现金额</p>
          <p class="money" v-text="'￥'+userBalance"></p>
          <button @click="shenqing()" class="req-money-btn">申请提现</button>
        </div>
      </div>
      <!-- 用户福利 -->
      <div class="user-welfare">
        <div class="score-wrap">
          <div class="score">
            <p class="score-num tc">积分</p>
            <p class="score-text" v-text="score"></p>
          </div>
          <div class="exchange-wrap">
            <img src="~assets/img/icon_jf_1@2x.png" alt="">
            <router-link tag="span" to="/mall">立即兑换</router-link>
          </div>
        </div>
        <div class="welfare-title" v-text="level+'福利'"></div>
        <div class="welfare-list">
          <div class="item-wrap">
              <router-link class="item" to='/recommand' tag="div"><img src="~assets/img/icon_fr@2x.png" alt=""><span>我要推荐</span></router-link>
              <router-link class="item" to='/see_point' tag="div"><img src="~assets/img/icon_jd@2x.png" alt=""><span>建点奖励</span></router-link>
              <router-link class="item" to='/amount_touch' tag="div"><img src="~assets/img/icon_lp@2x.png" alt=""><span>量碰管理</span></router-link>
              <router-link class="item" to='/foster' tag="div" id="vip" v-if="this.isFoster"><img src="~assets/img/icon_py@2x.png" alt=""><span>我要培育</span></router-link>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-tab">
      <ul>
        <li>
          <router-link to="/user"><span class="mall_user_icon"></span><span>个人中心</span></router-link>
        </li>
        <li>
          <router-link to="/mall"><span class="mall_user_icon mall_icon"></span><span>商城</span></router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { MessageBox } from 'mint-ui'
import { apiPost } from 'src/common/api.js'
export default {
  name: 'HelloWorld',
  data () {
    return {
      accountInfo: null,
      level: '',
      userBalance: 0,
      isFoster: false,
      score: 0
    }
  },
  mounted () {
    this.getUserInfo()
    this.getUserMoney()
  },
  methods: {
    shenqing () {
      apiPost('user_account_list', {}).then((data) => {
        console.log(data)
        if (data.data.length === 0) {
          MessageBox.confirm('您还未绑定提现账号，是否前去绑定?').then(action => {
             this.$router.push('/change_cart')
        }).catch(()=>{})
        } else {
          this.$router.push('/shenq_present')
        }
      })
    },
    // 获取个人中心等级
    getUserInfo () {
      apiPost('userinfo',{}).then((res) => {
        if (res.status === 0) {
          this.accountInfo = res.data.account_info
          // 等级
          let levelNum = this.accountInfo.level
          // 获取vip的培育
          let Vip = document.getElementById('vip')
          switch (levelNum) {
            case 1:
              this.level = '银卡'
              this.isFoster = false
              break
            case 2:
              this.level = '金卡'
              this.isFoster = false
              break
            case 3:
              this.level = '钻石'
              this.isFoster = true
              break
            case 4:
              this.level = 'VIP'
              this.isFoster = true
              break
          }
        } else {
          console.log(res.msg)
        }
      })
    },
    // 获取个人中心余额
    getUserMoney () {
       apiPost('user_balance',{}).then((res) => {
        if (res.status === 0) {
          // 余额
          this.userBalance = res.data.balance
          // 积分
          this.score = res.data.integral
        } else {
          console.log(res.msg)
        }
      })
    }
  }
}
</script>
<style scoped lang='scss'>
  @import '~lib/reset.scss';
  .user-content {
    position: relative;
    height: 100%;
    padding: 0 0 50px;
    overflow-y: auto;
    box-sizing: border-box;
    .user-info-center {
      background-color: #fff;
      margin-top: 10px;
      padding: 0 10px 26px 10px;
      .icon-wrap {
        float: right;
        margin-top: 12px;
        img {
          width: 24px;
          height: 24px;
        }
        .icon-income {
          margin-right: 12px;
        }
      }
      .user-money {
        clear: both;
        .money-title {
          font-size: $font-14;
          color: $color-font-one;
        }
        .money {
          font-size: 36px;
        }
        .req-money-btn {
          width: 291px;
          height: 50px;
          background-color: $color-bg;
          border: none;
          outline: none;
          border-radius: 2px;
          color: #fff;
          font-size: $font-18;
          letter-spacing: 4px;
          box-shadow: 0 2px 4px #5CC547;
          margin-top: 22px;
        }
      }
    }
    .user-welfare {
      margin-top: 10px;
      background-color: #fff;
      position: relative;
      padding:16px 16px 0 16px;
      overflow-y: auto;
      box-sizing: border-box;
      .score-wrap {
        overflow: hidden;
        padding-bottom: 10px;
        border-bottom: 1px solid #e5e5e5;
        margin-bottom: 20px;
        .score {
          float: left;
          margin-left: 40px;
          .score-num {
            font-size: $font-15;
            columns: #666;
          }
          .score-text {
            font-size: $font-18;
            color: $color-font-two
          }
        }
        .exchange-wrap {
          float: right;
          margin-right: 40px;
          font-size: $font-16;
          margin-top:8px;
          img {
            width: 24px;
            margin-right: 15px;
          }
        }
      }
      .welfare-title {
        font-size: $font-18;
      }
      .welfare-list {
        .item-wrap{
          clear: both;
          .item {
            padding: 22px 0 8px 0;
            img {
              width: 24px;
              height: 24px;
              margin-right: 14px;
            }
            span {
              font-size: $font-15;
              letter-spacing: 2px;
            }
          }
        }
        .item:not(:last-child) {
          border-bottom: 1px solid #e5e5e5;
        }
      }
    }
  }
  .item:not(:last-child) {
    border: none;
  }
  // 底部
  .bottom-tab {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    ul {
      list-style: none;
      font-size: 0;
      li {
        display: inline-block;
        width: 50%;
        font-size: 0;
        a {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 50px;
          line-height: 50px;
          font-size: 16px;
          color: #23ab1b;
          text-align: center;
          .mall_user_icon {
            display: inline-block;
            margin-right: 0.5em;
            width: 25px;
            height: 25px;
            object-fit: contain;
            vertical-align: text-top;
            background: url('~assets/img/mall/mall_user.png');
            background-position: -10px -44px;
            background-size: 78px 78px;
          }
          .mall_icon {
            background-position: -44px -44px;
          }
        }
        a.router-link-active {
          background: #23ab1b;
          color: #fff;
          span {
            background-position: -10px -10px;
          }
        }
      }
    }
  }
</style>
